<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .chat-container {
        position: fixed;
        bottom: 20px;
        right: 20px;
        width: 400px;
        height: 500px;
        background-color: #f0f2f5;
        border-radius: 10px;
        box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
        font-family: Arial, sans-serif;
      }

      .chat-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #3f51b5;
        color: white;
        padding: 10px;
        border-radius: 10px 10px 0 0;
      }

      .chat-title {
        font-size: 20px;
      }

      .chat-close {
        font-size: 24px;
        cursor: pointer;
      }

      .chat-messages {
        height: 400px;
        overflow-y: auto;
        padding: 10px;
      }

      .chat-message {
        display: flex;
        flex-direction: column;
        margin-bottom: 10px;
      }

      .message-sender {
        font-weight: bold;
        margin-bottom: 5px;
      }

      .message-text {
        background-color: #e3f2fd;
        padding: 8px;
        border-radius: 10px;
        max-width: 70%;
      }

      .message-time {
        font-size: 12px;
        color: gray;
        margin-left: auto;
      }

      .chat-input {
        display: flex;
        align-items: center;
        padding: 10px;
        border-top: 1px solid #e0e0e0;
      }

      .chat-input input {
        flex: 1;
        padding: 8px;
        border-radius: 20px;
        border: none;
        margin-right: 10px;
      }

      .chat-input button {
        padding: 8px 16px;
        background-color: #3f51b5;
        color: white;
        border: none;
        border-radius: 20px;
        cursor: pointer;
      }

      .chat-input button:hover {
        background-color: #303f9f;
      }
    </style>
    <script>
      const chatContainer = document.querySelector(".chat-container");
      const chatMessages = chatContainer.querySelector(".chat-messages");
      const chatInput = chatContainer.querySelector(".chat-input input");
      const chatButton = chatContainer.querySelector(".chat-input button");
      const chatClose = chatContainer.querySelector(".chat-close");

      chatClose.addEventListener("click", () => {
        chatContainer.style.display = "none";
      });

      chatButton.addEventListener("click", () => {
        const message = chatInput.value;
        if (message.trim() === "") {
          return;
        }
        addMessage("Me", message);
        chatInput.value = "";
      });

      function addMessage(sender, message) {
        const time = new Date().toLocaleTimeString([], {
          hour: "2-digit",
          minute: "2-digit",
        });
        const messageElement = document.createElement("div");
        messageElement.classList.add("chat-message");

        const senderElement = document.createElement("div");
        senderElement.classList.add("message-sender");
        senderElement.textContent = sender;

        const textElement = document.createElement("div");
        textElement.classList.add("message-text");
        textElement.textContent = message;

        const timeElement = document.createElement("div");
        timeElement.classList.add("message-time");
        timeElement.textContent = time;

        messageElement.appendChild(senderElement);
        messageElement.appendChild(textElement);
        messageElement.appendChild(timeElement);

        chatMessages.appendChild(messageElement);
      }
    </script>
  </head>
  <body>
    <div class="chat-container">
      <div class="chat-header">
        <div class="chat-title">My Chat</div>
        <div class="chat-close">&times;</div>
      </div>
      <div class="chat-messages"></div>
      <div class="chat-input">
        <input type="text" placeholder="Type your message..." />
        <button>Send</button>
      </div>
    </div>
  </body>
</html>
